<template>
  <div class="container">
    <div class="merchant_detail" v-show="shopDetail.id">
      <van-swipe
        class="merchant_swiper"
        :autoplay="3000"
        v-if="shopDetail.images"
      >
        <van-swipe-item
          v-for="item in shopDetail.images.split(',')"
          :key="item"
        >
          <div class="merchant_swiper">
            <img class="merchant_swiper_img" :src="imgUrl + item" />
          </div>
        </van-swipe-item>
      </van-swipe>
      <div class="merchant_swiper" v-else>
        <img
          class="merchant_swiper_img"
          src="@/assets/img/merchant/default.jpg"
        />
      </div>
      <div class="merchant_back">
        <img
          src="@/assets/img/merchant/Collect@2x.png"
          alt=""
          style="width: 28px;height: 28px;"
          @click="$router.back()"
        />
      </div>
      <div class="merchant_msg">
        <div class="merchant_msg_content">
          <text-roll
            class="merchant_name"
            :class="{ merchant_rest: !shopDetail.isBusiness }"
            :text="shopDetail.branchName"
          ></text-roll>
          <div class="merchant_powerBank" v-if="shopDetail.isBusiness">
            <div style="display: inline-block;">
              {{ $t("home_rent") }}:
              <span style="margin-right:10px;">{{ shopDetail.rent }}</span>
            </div>
            <div style="display: inline-block;">
              {{ $t("home_return") }}:
              <span>{{ shopDetail.recovery }}</span>
            </div>
          </div>
          <div
            class="merchant_powerBank"
            v-else
            :class="{ merchant_rest: !shopDetail.isBusiness }"
          >
            {{ $t("home_outOfService") }}
          </div>
          <div
            class="merchant_powerBank"
            v-if="shopDetail.openTime != 'Closed'"
          >
            <!-- {{shopDetail.isBusiness ? $t("home_open") : ''}}
            <span
              class="merchant_powerBankSpan"
              style="margin-left:10px;"
              v-if="shopDetail.openTime != '24H'"
              >{{
                shopDetail.openTime.slice(5)[0] == "d"
                  ? shopDetail.openTime.slice(6)
                  : shopDetail.openTime.slice(5)
              }}</span
            > -->
            <span class="merchant_powerBankSpan">
              {{ shopDetail.openTime }}
            </span>
          </div>
          <div
            v-else
            class="merchant_powerBank"
            :class="{ merchant_rest: !shopDetail.isBusiness }"
          >
            {{$t("home_closed")}}
          </div>
          <div class="merchant_powerBank merchant_address">
            {{ shopDetail.address }}
          </div>
          <div class="billing_rule">
            <div class="billing_rule_title">{{ $t("order_pricePlan") }}</div>
            <div
              class="billing_rule_content"
              v-if="shopDetail.billing.isSystem"
            >
              {{ $t("FREE_USAGE") }}
            </div>
            <div class="billing_rule_content" v-else>
              <span v-if="shopDetail.billing.freeDuration">
                {{
                  $t("billingRules1")
                    .replace(
                      "$order",
                      shopDetail.billing.freeLimit > 0
                        ? $t(`First_order${shopDetail.billing.freeLimit}`)
                        : $t("Every_order")
                    )
                    .replace("$freeDuration", shopDetail.billing.freeDuration)
                    .replace(
                      "$times1",
                      shopDetail.billing.freeDurationControlType == 1
                        ? shopDetail.billing.freeDuration > 1
                          ? $t("minute3")
                          : $t("minute2")
                        : shopDetail.billing.freeDurationControlType == 2
                        ? shopDetail.billing.freeDuration > 1
                          ? $t("hour4")
                          : $t("hour3")
                        : shopDetail.billing.freeDuration > 1
                        ? $t("days")
                        : $t("day")
                    )
                }}
              </span>
              <span>
                {{
                  $t("billingRules2")
                    .replace(
                      "$thereafter",
                      shopDetail.billing.freeDuration ? $t("thereafter") : ""
                    )
                    .replace(/\s+$/, '')
                    .replace("$amount", formatMoney(shopDetail.billing.amount))
                    .replace("$cycle", shopDetail.billing.cycle)
                    .replace(
                      "$times2",
                      shopDetail.billing.controlType == 1
                        ? shopDetail.billing.cycle > 1
                          ? $t("minute3")
                          : $t("minute2")
                        : shopDetail.billing.controlType == 2
                        ? shopDetail.billing.cycle > 1
                          ? $t("hour4")
                          : $t("hour3")
                        : shopDetail.billing.cycle > 1
                        ? $t("days")
                        : $t("day")
                    )
                }}{{
                shopDetail.billing.dayAmount
                  ? $t('punctuation1')
                  : $t('punctuation2')
              }}
              </span>
              <span v-if="shopDetail.billing.dayAmount">
                {{
                  $t("billingRules3").replace(
                    "$dayAmount",
                    formatMoney(shopDetail.billing.dayAmount)
                  )
                }}
              </span>
              <span v-if="shopDetail.billing.penaltyAmount">
                {{
                  $t("billingRules4")
                    .replace(
                      "$penaltyAmount",
                      formatMoney(shopDetail.billing.penaltyAmount)
                    )
                    .replace(
                      "$maxRentDuration",
                      shopDetail.billing.maxRentDuration
                    )
                    .replace(
                      "$times3",
                      shopDetail.billing.maxDurationControlType == 1
                        ? shopDetail.billing.maxRentDuration > 1
                          ? $t("minute3")
                          : $t("minute2")
                        : shopDetail.billing.maxDurationControlType == 2
                        ? shopDetail.billing.maxRentDuration > 1
                          ? $t("hour4")
                          : $t("hour3")
                        : shopDetail.billing.maxRentDuration > 1
                        ? $t("days")
                        : $t("day")
                    )
                }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import share from "@/mixins/share";
import $api from "@/assets/js/api/merchant";
export default {
  mixins: [share],
  data() {
    return {
      params: {},
      shopDetail: {
        billing: {
          amount: 0,
          controlType: 1,
          cycle: 1,
          dayAmount: 0,
          freeDuration: 1,
          freeDurationApplyOrderNum: null,
          freeDurationControlType: 1,
          id: null,
          isSystem: false,
          maxDurationControlType: 1,
          maxRentDuration: 0,
          penaltyAmount: 0,
          platformId: 1,
          upfrontAmount: 0,
          upfrontDuration: 0,
          upfrontDurationControlType: 1
        },
        openTime: "Closed"
      },
      imgUrl: ""
    };
  },
  computed: {},
  created() {
    this.getLang();
    this.params = JSON.parse(this.$route.query.params);
    this.getDetails();
    let fileHost = JSON.parse(localStorage.getItem("configs")).find(
      item => item.key == "file-host"
    );
    if (!fileHost) this.imgUrl = process.env.BASE_URL + "/";
    else this.imgUrl = fileHost.value;
  },
  mounted() {},
  methods: {
    getDetails() {
      $api.getBranchesDetail(this.params).then(res => {
        if (res.code == 0) {
          this.shopDetail = res.data;
        }
      });
    }
  }
};
</script>

<style lang="scss">
.merchant_detail {
  width: 100%;
  height: 100vh;
  background: #ffffff;
  .merchant_swiper {
    width: 100%;
    height: 250px;

    .merchant_swiper_img {
      width: 100%;
      height: 250px;
    }
  }
  .merchant_back {
    position: absolute;
    left: 20px;
    top: 8px;
    z-index: 9;
  }
  .merchant_msg {
    width: 100%;
    background: #ffffff;
    border-radius: 13px 13px 0 0;
    top: 220px;
    padding-bottom: 20px;
    z-index: 99;
    position: absolute;
    .merchant_msg_content {
      padding: 0 20px;
      .merchant_name {
        padding: 22px 0 18px 0;
        border-bottom: 1px solid #d3d9e3;
        font-size: 20px;
        font-weight: 600;
        text-align: left;
        color: #39404d;
        line-height: 24px;
      }
      .merchant_powerBank {
        padding: 14px 0;
        font-size: 14px;
        font-weight: 400;
        text-align: left;
        color: var(--text-color);
        line-height: 16px;
        border-bottom: 1px solid #d3d9e3;
        .merchant_powerBankSpan {
          color: #39404d;
        }
      }
      .merchant_address {
        color: #39404d;
        padding: 0;
        margin: 14px 0;
        border: none;
        display: -webkit-box; /* 必须指定display属性 */
        overflow: hidden; /* 控制超出部分的处理方式 */
        text-overflow: ellipsis; /* 使用省略号表示被裁切的部分 */
        -webkit-line-clamp: 2; /* 最多显示的行数 */
        -webkit-box-orient: vertical; /* 必须指定box-orient属性 */
      }
      .billing_rule {
        margin: 12px 0;
        .billing_rule_title {
          font-size: 15px;
          font-weight: 600;
          text-align: left;
          color: #39404d;
          line-height: 18px;
          margin-bottom: 4px;
          border-top: 1px solid #d3d9e3;
          padding-top: 12px;
        }
        .billing_rule_content {
          font-size: 13px;
          font-weight: 400;
          text-align: left;
          color: #66666b;
          line-height: 16px;
        }
      }
    }
  }

  .merchant_rest {
    color: #888888 !important;
  }
}
</style>
